<template>
  <page-wrap :show-top="false" back hideTab :dark="false" style="overflow-y: hidden" :hideSafeArea="true">
    <!-- <view
      class="collectMask"
      :style="{
        display: collectShow && collectShowFirst ? 'flex' : 'none',
      }"
    >
      <view class="collectMask_all">
        <view class="collectMask_top"></view>
        <view class="collectMask_middle">
          <view class="collectMask_middle_high"></view>
          <view class="collectMask_middle_left"></view>
        </view>
        <view class="collectMask_bottom">
          <img :src="maskMessage" />
          <view class="close" @click="closeMask">×</view>
        </view>
      </view>
      <view
        class="collectMask_rightMargin"
        :style="{
          width: positionInfo.isShowQrCode == '1' ? '108rpx' : '20rpx',
        }"
      ></view>
    </view> -->
    <template v-slot:title>
      <view class="titleTop">
        <view class="title2" v-if="showTitle">
          {{ splitTitleText }}
          <button v-if="personId" @click="clickCollect"
            :class="[positionInfo.isCollect ? 'interested' : 'unintrested']">
            {{ positionInfo.isCollect ? "已关注" : "关注" }}
          </button>
          <button v-else-if="isAuthSetting" :class="[positionInfo.isCollect ? 'interested' : 'unintrested']"
            @click="showLoginDialog" type="success">
            {{ positionInfo.isCollect ? "已关注" : "关注" }}
          </button>
          <button v-else @click="clickCollect" :class="[positionInfo.isCollect ? 'interested' : 'unintrested']"
            @getuserinfo="getUserInfo" :loading="getUserInfoLoading" type="success">
            {{ positionInfo.isCollect ? "已关注" : "关注" }}
          </button>
        </view>
      </view>
    </template>
    <view class="wrapper" :style="'padding-top:' + navHeight + 'px;'" type="line">
      <view class="header" :style="'top:' + navHeight + 'px;'"></view>
      <view class="menu menuFixed" :style="'top:' + navHeight + 'px;'" v-if="menuTop">
        <u-tabs :current="currentIndex" name="title" :list="dynamicDimensionList" @change="handleCateClick" height="60"
          :active-item-style="activeItemStyle" :gutter="24" :bar-style="barStyle" font-size="28"
          :inactive-color="'#999999'"></u-tabs>
      </view>
      <scroll-view :style="'height: calc(100vh - ' + navHeight + 'px)'" :scroll-y="true" @scroll="watchScroll"
        scroll-with-animation :scroll-into-view="scrollDomId">
        <view>
          <view class="positionInfo">
            <view class="collectMask_bottom" :style="{
                display: collectShow && collectShowFirst ? 'flex' : 'none',
                right: positionInfo.isShowQrCode == '1' ? '40rpx' : '0',
              }">
              <!-- <img :src="maskMessage" /> -->
              <view class="close" @click="closeMask">×</view>
            </view>
            <view class="styleTitle">
              <view class="positionName">{{ positionName }}</view>
              <view class="styleTitleRight">
                <button :class="positionInfo.isCollect ? 'btn' : 'btn aloha'" @click="clickCollect" v-if="personId">
                  {{ positionInfo.isCollect ? "已关注" : "关注" }}
                </button>
                <button v-else-if="isAuthSetting" :class="positionInfo.isCollect ? 'btn' : 'btn aloha'"
                  @click="showLoginDialog" type="success">
                  {{ positionInfo.isCollect ? "已关注" : "关注" }}
                </button>
                <button v-else :class="positionInfo.isCollect ? 'btn' : 'btn aloha'" open-type="getUserInfo"
                  :hair-line="false" @getuserinfo="getUserInfo" :loading="getUserInfoLoading" type="success">
                  {{ positionInfo.isCollect ? "已关注" : "关注" }}
                </button>
                <image v-if="positionInfo.isShowQrCode == '1'" :src="iconQrcodeSrc" class="styleQrcode"
                  @click="clickQrCode"></image>
              </view>
            </view>
            <view class="positionDesc">{{ topTitle && topTitle != "null" ? topTitle : "--"
              }}{{ parentTitle ? " · " + parentTitle : "" }}
            </view>
            <view class="positionUpdate">
              <view>最近更新于 {{ timeUpdate(positionInfo.updateTime) }}</view>
              <view class="styleJobDetailViewNumber">
                <image class="styleImageJobDetailView" :src="srcJobDetailView"></image><span
                  class="styleTextJobDetailViewNumber">{{
                  positionInfo.viewNum || 0
                }}</span>
              </view>
            </view>
            <view class="positionDefine">
              <CheckMore :content="getFilterBrTagText(positionInfo.introduce, '')" :contentSlice="72"></CheckMore>
            </view>
            <view class="positionListName" v-if="
                positionInfo.anotherName && positionInfo.anotherName.length > 0
              ">
              <view class="title">职业别称</view>
              <view class="otherName">{{
                getFilterBrTagText(positionInfo.anotherName, "\n")
              }}</view>
            </view>
            <view class="positionListName mb" v-if="
                positionInfo.similarProfession &&
                positionInfo.similarProfession.length > 0
              ">
              <view class="title">相近职业</view>
              <view class="samePosition">
                <view v-for="(i, index) in truncation(
                    positionInfo.similarProfession
                  )" class="positionClickTo" :key="index">
                  {{ i }}
                  <img v-if="false" :src="arrowRight" />
                </view>
              </view>
            </view>
          </view>
          <view class="menu">
            <u-tabs :current="currentIndex" name="title" :list="dynamicDimensionList" @change="handleCateClick"
              height="60" :active-item-style="activeItemStyle" :gutter="24" :bar-style="barStyle" font-size="28"
              :inactive-color="'#999999'"></u-tabs>
          </view>
          <view class="componentsOrder">
            <view v-for="(item, index) in dynamicDimensionList" :key="item.layerId" class="componentsOut">
              <view class="scrollItemToTop" :id="'scrollItem' + index"></view>
              <ProfessionTab class="scrollItem" :title="item.title" :positionName="positionName"
                :positionId="positionId" :layerId="item.children[0].layerId" :pageName="this.pageName"
                :personId="personId" :isAuthSetting="isAuthSetting" v-if="item.showType == 'profession'"
                @refreshData="refreshData">
              </ProfessionTab>
              <JobDescriptionTab class="scrollItem" :title="item.title" :positionName="positionName"
                :positionId="positionId" :layerId="item.layerId" :pageName="this.pageName" :personId="personId"
                :isAuthSetting="isAuthSetting" v-if="item.showType == 'tree'" @refreshData="refreshData">
              </JobDescriptionTab>
              <MainTasks class="scrollItem" :title="item.title" :positionId="positionId"
                v-else-if="item.showType == 'text'" :questionId="item.questionId"></MainTasks>
              <SalarySolution class="scrollItem" :title="item.title" :layerId="item.layerId" :positionId="positionId"
                :isCollect="positionInfo.isCollect" :positionName="positionName" :personId="personId"
                :isAuthSetting="isAuthSetting" v-else-if="item.showType == 'chart'" @collected="collected"
                @onLoginSuccess="onLoginSuccess"></SalarySolution>
              <RecommendedPositions class="scrollItem" :title="item.title" :layerId="item.layerId"
                :jobName="positionName" :positionId="positionId" v-else-if="item.showType == 'position'">
              </RecommendedPositions>
              <CorrespondingMajors class="scrollItem" :positionId="positionId" :layerId="item.layerId"
                :title="item.title" v-else-if="item.showType == 'major'"></CorrespondingMajors>
              <!-- 职讯  -->
              <PositionMessages class="scrollItem" :positionId="positionId" :layerId="item.layerId" :title="item.title"
                :jobName="positionName" v-else-if="item.showType == 'article'"></PositionMessages>
              <!-- 职说  -->
              <PositionSays class="scrollItem" :positionId="positionId" :layerId="item.layerId" :title="item.title"
                :jobName="positionName" v-else-if="item.showType == 'video'"></PositionSays>
              <Benchmark class="scrollItem" ref="benchmark" :positionId="positionId" :layerId="item.layerId"
                :title="item.title" :jobName="positionName" :isCollect="positionInfo.isCollect"
                v-else-if="item.showType == 'pole'"></Benchmark>
              <Benchmark class="scrollItem" ref="benchmark2" :positionId="positionId" :layerId="item.layerId"
                :title="item.title" :jobName="positionName" :isCollect="positionInfo.isCollect"
                v-else-if="item.showType == 'report'"></Benchmark>
            </view>
            <view class="emptyForIphone"></view>
          </view>
          <view class="bottomBlank" v-if="false"></view>
        </view>
      </scroll-view>
    </view>
    <u-popup class="styleQrcodePop" :custom-style="customPopStyle" v-model="isQrcodeShow" mode="center"
      :closeable="true" width="530rpx" height="668rpx">
      <!-- @longtap="generateQrCode" -->
      <view class="styleQrcodePopContainer">
        <span class="styleQrcodePopTitle">扫码进群了解更多</span>
        <img :src="positionInfo.qrCode" class="styleUserQRCode" :show-menu-by-longpress="true" />
        <!-- <img
          src="https://upload.yl1001.com/upload/images/view?file=tQLd8xRYlZe7D/_u7k=r_btF-8,Iw9HfJ6A5l15nUkeUlMl22a7yi=ufn5dhp.jpg"
          class="styleUserQRCode" :show-menu-by-longpress="true" /> -->
        <span class="styleQrcodePersonName"> </span>
      </view>
      <view class="styleQrcodeSaveContainer" @click="saveToAlbum">
        <span class="styleQrcodeSave">保存二维码至相册</span>
      </view>
    </u-popup>
    <u-popup class="stylePopUnlockSuccess" v-model="isUnlockSuccessPopupShow" mode="center" :mask-close-able="true"
      :mask="true">
      <view class="styleUnlockSuccessContainer">
        <image :src="srcUnlockSuccess" class="styleUnlockSuccess"></image>
      </view>
    </u-popup>

    <LoginDialog ref="loginDialog" @loginSuccessBack="loginSuccessBack"></LoginDialog>
  </page-wrap>
</template>

<script>
import {
  addToCollection,
  cancelCollection,
  getHomepageLayerData,
  getPositionInfo,
  getJobDescriptionUnlockAndShare,
  getPositionExtend,
  addBuryingPoint,
  getUserInfo,
  cardRegist,
  getPersonOrDefaultCardType,
} from "@/api/modules/career";
import WxLoginMixin from "@/mixins/wxLogin";
import ShareMixin from "@/mixins/share";
import ReportShareMixin from "@/mixins/reportShare";
import JobDescriptionTab from "./components/jobDescriptionTab.vue";
import ProfessionTab from "./components/professionTab.vue";
import SalarySolution from "./components/positionDetailComponents/salarySolution";
import MainTasks from "./components/positionDetailComponents/mainTasks";
import RecommendedPositions from "./components/positionDetailComponents/recommendedPositions";
import CorrespondingMajors from "./components/positionDetailComponents/correspondingMajors";
import PositionMessages from "./components/positionDetailComponents/positionMessages";
import PositionSays from "./components/positionDetailComponents/positionSays";
import Benchmark from "./components/positionDetailComponents/benchmark";
import CheckMore from "./components/positionDetailComponents/checkMore";
import LoginDialog from "@/components/LoginDialog";
import { throttle } from "lodash";

let componentsName = [
  "主要工作任务",
  "薪酬情况",
  "职位推荐",
  "AI与职业发展关系",
  "晋升通道",
  "对口专业",
  "职讯",
  "职说",
  "标杆",
];
export default {
  name: "positionDetail",
  mixins: [WxLoginMixin, ShareMixin, ReportShareMixin],
  components: {
    ProfessionTab,
    JobDescriptionTab,
    SalarySolution,
    MainTasks,
    RecommendedPositions,
    CorrespondingMajors,
    PositionMessages,
    PositionSays,
    Benchmark,
    CheckMore,
    LoginDialog,
  },
  data() {
    return {
      //私聊分享名称
      chatShareTitle: null,
      //朋友圈分享名称
      platformShareTitle: null,
      advertiseShow: true,
      advertiseShowZhixun: true,
      maskMessage:
        this.$imgBaseSelf + "career/positionDictionary/maskMessage.png",
      collectShowFirst: true,
      collectShow: false,
      menuTop: false,
      isDark: false,
      orderList: [null, null, null, null, null, null, null, null, null],
      dynamicDimensionList: [],
      showTitle: false,
      topBg: `red`,
      arrowRight: this.$imgBaseSelf + "common/arrowRight.png",
      positionInfo: {
        isCollect: false,
      },
      navHeight: 0,
      connecting: false,
      loading: false,
      positionName: "",
      positionId: "",
      parentTitle: "",
      salaryData: {},
      showTop: false,
      topTitle: "",
      personId: uni.getStorageSync("person-id").slice(2) || "",
      shareQuery: `jumpPersonId=${this.personId}&jumpSource=10&sourceType=10&positionName=${this.positionName}&positionId=${this.positionId}&parentTitle=${this.parentTitle}&topTitle=${this.topTitle}`,
      sharePath: `/pagesSub/careerNew/positionDictionary/positionDetail?${this.shareQuery}`,
      isHaveQrCode: "2",
      iconCollectSelectedSrc:
        this.$imgBaseSelf + "career/positionDictionary/collect_selected.webp",
      iconCollectUnSelectedSrc:
        this.$imgBaseSelf + "career/positionDictionary/collect_unselect.webp",
      iconQrcodeSrc:
        this.$imgBaseSelf + "career/positionDictionary/qrcode.webp",
      srcUnlockSuccess:
        this.$imgBaseSelf + "career/positionDictionary/unlock_success.webp",
      isQrcodeShow: false,
      customPopStyle: {},
      isCollectShowPaddingStyle: true,
      srcJobDetailView:
        this.$imgBaseSelf + "career/positionDictionary/job_detail.png",
      activeItemStyle: {
        "font-weight": "600",
        color: "#000000",
        "font-size": "32rpx",
      },
      currentIndex: 0,
      barStyle: {
        width: "20px",
        height: "8px",
        background:
          "linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #F75A3E 100%)",
        "border-radius": "4px",
        left: "0",
        bottom: "0rpx",
      },
      scrollDomId: "",
      isClickScroll: false,
      isUnlockSuccessPopupShow: false,
      scrollTop: 0,
      positionInfoHeight: 0,
      pageName: "",
      shareCareerInfoParams: {},
      buryingPointId: "",
      cardType: "",
    };
  },
  onLoad(opt) {
    this.positionName = opt.positionName || "";
    this.shareTitle = this.positionName;
    this.positionId = opt.positionId || "";
    this.parentTitle = opt.parentTitle || "";
    this.topTitle = opt.topTitle || "";
    this.navHeight = getApp().globalData.navHeight - 5;
    this.getHomepageData();
    this.shareQuery = `jumpPersonId=${this.personId}&jumpSource=10&sourceType=10&positionName=${this.positionName}&positionId=${this.positionId}&parentTitle=${this.parentTitle}&topTitle=${this.topTitle}`;
    this.sharePath = `/pagesSub/careerNew/positionDictionary/positionDetail?${this.shareQuery}`;
    this.getLockAndShareState();
    this.getShareTitle();
    this.pageName = opt.pageName;
    this.shareContent.contentType = "1";

    let jumpPersonId = "";
    if (opt.jumpPersonId) {
      jumpPersonId = opt.jumpPersonId;
    }
    let jumpSource = "";
    if (opt.jumpSource) {
      jumpSource = opt.jumpSource;
    }
    let sourceType = "";
    if (opt.sourceType) {
      sourceType = opt.sourceType;
    }

    this.shareCareerInfoParams = {
      //分享参数
      etId: 20047,
      id: this.buryingPointId ? this.buryingPointId : "", //后台要求不能传空，未登录也要统计
      personId: uni.getStorageSync("person-id").slice(2) || "0",
      cardType: this.cardType ? this.cardType : uni.getStorageSync("cardType") || this.cardType,
      consultantId: uni.getStorageSync("sellId")
        ? uni.getStorageSync("sellId")
        : "",
      originType: this.originFrom == "shareLink" ? 10 : 20,
      statType: "40",
      jumpPersonId: jumpPersonId,
      jumpSource: jumpSource,
      sourceType: sourceType,
    };
    //外部链接点击统计事件
    if (jumpSource && sourceType) {
      this.addBuryingPointFn(20081, "50", jumpPersonId, jumpSource, sourceType);
    }
  },
  onShow() {
    this.addBuryingPointFn(20094, "", "", "", "");
    wx.reportEvent("job_detail_enter_click", {}); //职业详情—进入职业详情页
    this.getDetail();
    if (this.$refs.benchmark) {
      this.$refs.benchmark[0].getLayerDetail();
      this.$refs.benchmark2[0].getLayerDetail();
    }
  },
  activated() {
    console.log("activated");
    console.log("this.$refs", this.$refs);
    if (this.$refs.benchmark) {
      this.$refs.benchmark[0].getLayerDetail();
      this.$refs.benchmark2[0].getLayerDetail();
    }
  },
  computed: {
    splitTitleText: function () {
      if (!this.positionName) return "";
      if (this.positionName.length > 5) {
        return this.positionName.slice(0, 5) + "...";
      }
      return this.positionName;
    },
  },
  mounted() {
    this.checkAuthSetting();
    this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
    // if (!this.personId) {
    //   this.showLoginDialog();
    // }
  },
  methods: {
    async cardRegistFn() {
      const params = {
        cardKey: this.cardKey || "1", // cardType或者cardKe至少传一个
        cardType: this.cardType ? this.cardType : uni.getStorageSync("cardType") || this.cardType,
        sellId: +this.consultantId,
      };
      const res = await cardRegist(params);
      if (res.code != 200) {
        uni.showToast({ icon: "none", title: res.status_desc, duration: 1500 });
      }
    },
    async getUserInfoFn() {
      const params = { uid: "" };
      const res = await getUserInfo(params);
      if (res.code == 200) {
        // cardNoe和cardType是同时存在的
        await this.getPersonOrDefaultCardTypeFn();
        if (!res.data.cardNo) {
          // 说明此时没有绑卡 要自动绑卡(这里是针对中学生的项目)
          await this.cardRegistFn();
        }
      }
    },
    async getPersonOrDefaultCardTypeFn() {
      const params = {
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
        cardSource: "HIGH_ASSESSMENT", // 如果是默认注册是关于高考的卡，就要穿这个参数获取到cardType
      };
      const res = await getPersonOrDefaultCardType(params);
      if (res.code == 200 && res.data.cardType) {
        this.cardType = res.data.cardType;
        uni.setStorageSync("cardType", res.data.cardType);
      }
    },
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : "", //后台要求不能传空，未登录也要统计
        personId: uni.getStorageSync("person-id").slice(2) || "0",
        cardType: this.cardType ? this.cardType : uni.getStorageSync("cardType") || this.cardType,
        consultantId: uni.getStorageSync("sellId")
          ? uni.getStorageSync("sellId")
          : "",
        originType: this.originFrom == "shareLink" ? 10 : 20,
        statType: statType ? statType : "10",
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType,
      };
      const res = await addBuryingPoint(params);
    },
    getShareTitle() {
      getPositionExtend({ positionId: this.positionId }).then((res) => {
        if (res.code == 200) {
          this.chatShareTitle = res.data.chatShareTitle;
          this.platformShareTitle = res.data.platformShareTitle;
        }
      });
    },
    closeAdvertise() {
      this.advertiseShow = false;
    },
    enterAdvertise() {
      uni.navigateTo({
        url: "/pagesSub/career/activity/vocationalAssessment?fromWhere=junior",
      });
    },
    enterAdvertiseZhixun() {
      uni.navigateTo({
        url:
          "/pagesSub/career/careerInfo/articleDetail?id=3111699239989233&relatedType=2" +
          "&positionId=" +
          this.positionId,
      });
    },
    collected() {
      this.positionInfo.isCollect = true;
    },
    closeMask() {
      this.collectShow = false;
      this.collectShowFirst = false;
    },
    handleJump(personId) {
      uni.showToast({
        title: "登录成功",
        icon: "none",
      });
      this.personId = personId;
      this.getDetail();
      if (!this.positionInfo.isCollect) {
        this.clickCollect();
      }
    },
    handleCateClick(index) {
      this.isClickScroll = true;
      this.showTitle = true;
      this.isDark = false;
      this.currentIndex = index;
      // this.scrollDomId = "scrollItem" + index;
      this.menuTop = true;
      //这一步为了解决scroll-view bug，上拉顶部有时候不滚动，会失效的问题
      // if (this.scrollTop < this.positionInfoHeight) {
      //给个随意值，防止不滚动更新scrollTop直接点击tab闪动
      // this.scrollTop = 100;
      this.scrollDomId = "0";
      setTimeout(() => {
        console.log("this.scrollDomId", this.scrollDomId);
        this.scrollDomId = "scrollItem" + index;
      }, 50);
      // }
    },
    generateQrCode() {
      uni.scanCode({
        scanType: ["qrCode", "barCode"],
        success: function (res) {
          console.log(res);
        },
      });
    },
    watchScroll: throttle(function (e) {
      if (this.isClickScroll) {
        this.isClickScroll = false;
        return;
      }
      let top = e.detail.scrollTop;
      // console.log(Date.parse(new Date()));
      this.scrollTop = top;
      // console.log("top", top);
      if (top > 50) {
        this.showTitle = true;
        this.isDark = false;
      } else {
        this.isDark = true;
        this.showTitle = false;
      }
      uni
        .createSelectorQuery()
        .selectAll(".scrollItem")
        .boundingClientRect((rects) => {
          if (rects[0].top < 120) {
            this.menuTop = true;
          } else {
            this.menuTop = false;
          }
          for (let i = 0; i < rects.length; i++) {
            // console.log(rects[i].top);

            if (rects[i].top < 140) {
              this.currentIndex = i;
            } else {
              return;
            }
          }
        })
        .exec();
    }, 100),
    getDetail() {
      const params = {
        positionId: this.positionId,
        personId: this.personId,
      };
      getPositionInfo(params).then((res) => {
        // console.log("---------------------->getPositionInfo", res.data);
        if (res.code == 200) {
          this.positionInfo = res.data;
          this.collectShow = !res.data.isCollect;
          if (res.data.topName) {
            this.topTitle = res.data.topName;
          }
          if (res.data.parentName) {
            this.parentTitle = res.data.parentName;
          }
          if (res.data.positionName) {
            this.positionName = res.data.positionName;
          }
          this.$nextTick(() => {
            uni
              .createSelectorQuery()
              .in(this)
              .select(".positionInfo")
              .boundingClientRect((rect) => {
                this.positionInfoHeight = rect.height;
                console.log("元素高度为：" + rect.height);
              })
              .exec();
          });
        }
      });
    },
    getHomepageData() {
      const params = {
        id: this.positionId,
      };
      getHomepageLayerData(params).then((res) => {
        console.log("getHomepageLayerData", res.data);
        if (res.code == 200) {
          this.dynamicDimensionList = res.data;
        } else {
          console.log("请求失败");
        }
      });
    },
    setComponentData(list) {
      let result = [];
      let order = 0;
      list.forEach((lis) => {
        let Index = componentsName.indexOf(lis.title);
        lis.order = order;
        this.$set(this.orderList, Index, lis);
        order++;
      });
      console.log("this.orderList", this.orderList);
    },
    truncation(list) {
      if (list.length > 0) {
        let arr = list.split("、");
        let num = 0;
        let currentIndex = 0;
        let box = 0;
        arr.forEach((item, index) => {
          num += item.length + 2;
          if (box == 0) {
            currentIndex++;
            if (num > 20) {
              box = 1;
              num = item.length;
            }
          } else if (box == 1) {
            box = 2;
            if (num > 20) {
              return;
            } else {
              currentIndex++;
            }
          } else {
            return;
          }
        });
        return arr.slice(0, currentIndex);
      } else {
        return [];
      }
    },
    clickCollect() {
      if (!this.personId) {
        uni.showToast({
          title: "请先登录",
          icon: "none",
        });
        return;
      }
      console.log("clickCollect");
      if (this.positionInfo.isCollect) {
        const params = {
          positionId: this.positionId,
          personId: this.personId,
        };
        cancelCollection(params).then((res) => {
          if (res.code == 200) {
            this.positionInfo.isCollect = false;
            uni.showToast({
              title: "取消成功",
            });
          } else {
            console.log("取消收藏失败", res);
          }
        });
      } else {
        const params = {
          positionId: this.positionId,
          personId: this.personId,
          fromType: getApp().globalData.shareFrom,
        };
        addToCollection(params).then((res) => {
          if (res.code == 200) {
            this.positionInfo.isCollect = true;
            uni.showToast({
              title: "关注成功",
            });
            this.reportPositionCollect();
          } else {
            console.log("收藏失败", res);
          }
        });
      }
    },
    clickQrCode() {
      console.log("clickQrCode");
      this.isQrcodeShow = true;
    },
    openQrCodeImg() {
      uni.previewImage({
        urls: [this.positionInfo.qrCode],
        current: this.positionInfo.qrCode,
        indicator: "default",
      });
    },
    saveToAlbum() {
      this.savePosterPath(this.positionInfo.qrCode);
    },
    savePosterPath(url) {
      let that = this;
      uni.showLoading({
        title: "正在保存图片...",
      });
      //获取用户的当前设置。获取相册权限
      uni.getSetting({
        success: (res) => {
          //如果没有相册权限
          if (!res.authSetting["scope.writePhotosAlbum"]) {
            //向用户发起授权请求
            uni.authorize({
              scope: "scope.writePhotosAlbum",
              success: () => {
                //授权成功保存图片到系统相册
                uni.hideLoading();
                that.saveNetImageToLocal(url);
              },
              //授权失败
              fail: () => {
                uni.hideLoading();
                uni.showToast({
                  title: "未授权保存图片到相册！",
                });
              },
            });
          } else {
            console.log("saveNetImageToLocal");
            that.saveNetImageToLocal(url);
          }
        },
        fail: (res) => {},
      });
    },
    //保存网络图片到本地
    saveNetImageToLocal(url) {
      uni.downloadFile({
        url: url,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: (res) => {
                console.log("保存成功", res);
                uni.hideLoading();
                setTimeout(() => {
                  return uni.showToast({
                    title: "保存成功！",
                    duration: 1500,
                  });
                }, 200);
              },
              fail: (res) => {
                console.log("保存失败", res);
                uni.hideLoading();
                console.log(res.errMsg);
                if ("saveImageToPhotosAlbum:fail cancel" == res.errMsg) {
                  return uni.showToast({
                    title: "取消保存",
                  });
                } else {
                  return uni.showToast({
                    title: "保存失败",
                  });
                }
              },
              //无论成功失败都走的回调
              complete: (res) => {
                uni.hideLoading();
              },
            });
          } else {
            console.log("网络错误", res);
            uni.showToast({
              title: "网络错误",
            });
          }
        },
      });
    },
    getFilterBrTagText(content, str) {
      if (content) {
        return content.replace(/<br>/g, str);
      } else {
        return null;
      }
    },
    timeUpdate(str) {
      if (str && str.split(" ")[0]) {
        return str.split(" ")[0];
      } else {
        return "-";
      }
    },
    getLockAndShareState() {
      const params = {
        positionId: this.positionId,
        personId: this.personId,
      };
      console.log("获取解锁和分享状态", params);
      getJobDescriptionUnlockAndShare(params).then((res) => {
        if (res.code == 200) {
          console.log("获取解锁状态成功", res.data);
          if (res.data.toast == 0) {
            console.log("不显示解锁弹窗");
            this.isUnlockSuccessPopupShow = false;
          } else {
            this.isUnlockSuccessPopupShow = true;
            console.log("显示解锁弹窗");
          }
        } else {
          console.log("获取解锁状态失败");
        }
      });
    },
    showLoginDialog() {
      this.$refs.loginDialog.setVisibility(true);
    },
    async loginSuccessBack() {
      this.refreshData();
      wx.reportEvent("job_detail_login_consultant_click", {}); //职业详情—手机号一键登录
      await this.getUserInfoFn();
    },
    onLoginSuccess() {
      console.log("onLoginSuccess");
      this.refreshData();
    },
    refreshData() {
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      this.getHomepageData();
      this.getDetail();
    },
    //分享私聊
    onShareAppMessage(res) {
      let defaultObj = {
        title: this.chatShareTitle || this.positionName,
        path: this.sharePath,
        imageUrl: this.imageUrl,
      };
      return defaultObj;
    },
    //分享朋友圈
    onShareTimeline() {
      let defaultObj = {
        title: this.platformShareTitle || this.positionName,
        path: this.sharePath,
        query: this.shareQuery,
        imageUrl: this.imageUrl,
      };
      return defaultObj;
    },
  },
  watch: {
    "positionInfo.isCollect": function (newVal, oldVal) {
      // 在这里处理 `positionInfo.isCollect` 的变化
      if (newVal) {
        this.collectShow = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.titleTop {
  z-index: 999;

  .title1 {
    color: #fff;
  }

  .title2 {
    color: #fff;
    display: flex;
    align-items: center;

    span {
      margin-left: 20rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #f75a3e;
    }

    .interested {
      color: #999999;
      font-size: 28rpx;
      background-color: transparent;
    }

    .unintrested {
      color: #f75a3e;
      font-size: 28rpx;
      background-color: transparent;
    }
  }
}

.wrapper {
  background: url($img-base + "career/positionDictionary/job_detail_bg.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  min-height: 100vh;
  overflow-y: hidden;

  .positionInfo {
    margin: 24rpx 32rpx;
    border-radius: 24rpx;
    color: #fff;
    position: relative;

    .collectMask_bottom {
      position: absolute;
      right: 0;
      width: 382rpx;
      height: 168rpx;
      background: url($img-base + "career/positionDictionary/maskMessage.png");
      background-repeat: no-repeat;
      background-size: auto 100%;

      .close {
        font-size: 36rpx;
        width: 60rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        margin-top: 70rpx;
        margin-left: 326rpx;
        color: #c5a49e;
      }
    }

    .styleTitle {
      display: flex;
      justify-content: space-between;

      .positionName {
        font-size: 44rpx;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: 800;
        width: 480rpx;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        word-break: break-all;
      }

      .styleTitleRight {
        display: flex;

        .styleQrcode {
          margin-left: 24rpx;
          display: inline-block;
          width: 52rpx;
          height: 52rpx;
        }

        .btn {
          height: 52rpx;
          width: 120rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          border: none;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          border-radius: 8rpx;
          color: #fff;
          line-height: 28rpx;
          padding: 0;
          background: #546279;
          z-index: 9999;
        }

        .aloha {
          background: #f75a3e;
        }
      }
    }

    .positionDesc {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #fff;
      line-height: 36rpx;
      margin-top: 18rpx;
    }

    .positionUpdate {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #6d7a9a;
      line-height: 36rpx;
      margin-top: 18rpx;

      .styleJobDetailViewNumber {
        display: flex;
        flex-direction: row;
        align-items: center;

        .styleImageJobDetailView {
          width: 32rpx;
          height: 24rpx;
        }

        .styleTextJobDetailViewNumber {
          color: #6d7a9a;
          font-size: 28rpx;
          margin-left: 6rpx;
        }
      }
    }

    .positionDefine {
      margin: 56rpx 0;
    }

    .alc {
      align-items: center;
    }

    .positionListName {
      display: flex;
      margin-bottom: 34rpx;

      .title {
        width: 150rpx;
        font-size: 32rpx;
        font-family: PingFang-SC-Bold, PingFang-SC;
        font-weight: bold;
      }

      .otherName {
        margin-top: 3rpx;
        font-size: 24rpx;
        flex: 1;
        overflow: hidden;
        /* 允许换行但不执行断行 */
        white-space: normal;
        /* -webkit-line-clamp: 行数 */
        display: -webkit-box;
        /* -webkit-box-orient: 竖向排列 */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        /* 超长文本显示省略号 */
        text-overflow: ellipsis;
      }

      .samePosition {
        flex: 1;
        display: flex;
        overflow-x: hidden;
        flex-wrap: wrap;

        .positionClickTo {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          font-size: 24rpx;
          padding: 10rpx 12rpx;
          border-radius: 6rpx;
          background: #546279;
          margin-right: 16rpx;
          margin-bottom: 10rpx;

          img {
            width: 16rpx;
            height: 22rpx;
            margin-left: 8rpx;
          }
        }
      }
    }

    .mb {
      margin-bottom: 0px;
    }
  }
}

.styleQrcodePop {
  background-color: transparent;

  .styleQrcodePopContainer {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 32rpx;

    .styleQrcodePopTitle {
      margin-top: 62rpx;
      margin-left: auto;
      margin-right: auto;
      height: 40rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 40rpx;
    }

    .styleUserQRCode {
      margin: 26rpx auto;
      width: 310rpx;
      height: 310rpx;
    }

    .styleQrcodePersonName {
      margin-top: 26rpx;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 19rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #080808;
    }
  }

  .styleQrcodeSaveContainer {
    width: 530rpx;
    height: 72rpx;
    margin-top: 28rpx;
    background: #f75a3e;
    border-radius: 46rpx;
    display: flex;

    .styleQrcodeSave {
      color: #ffffff;
      margin-top: auto;
      margin-left: auto;
      margin-bottom: auto;
      margin-right: auto;
    }
  }

  ::v-deep .u-mode-center-box {
    background-color: transparent;
  }
}

.menu {
  width: 100%;
  // height: 85rpx;
  background: #f7f8fa;
  padding-top: 20rpx;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;

  z-index: 999;
}

.menuFixed {
  position: fixed;
}

.placeholder {
  height: 85rpx;
  /* 与menu一样的高度 */
  visibility: hidden;
  /* 不可见 */
}

.componentsOrder {
  background: #f7f8fa;
  display: flex;
  flex-direction: column;
  margin-top: -10rpx;

  .componentsOut {
    position: relative;

    .scrollItemToTop {
      position: absolute;
      visibility: hidden;
      width: 100%;
      height: 1px;
      top: -80rpx;
    }

    .banner-box {
      margin: 24rpx 32rpx;
    }
  }
}

.header {
  background: red;
  margin-bottom: -1rpx;
  position: fixed;
  z-index: 999;
  width: 100%;
}

// .content {
//   height: calc(100vh - 200rpx);
// }
.bottomBlank {
  height: 90rpx;
}

::v-deep .u-tabs {
  background: #f7f8fa !important;
}

.stylePopUnlockSuccess {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: transparent;

  .styleUnlockSuccessContainer {
    .styleUnlockSuccess {
      width: 694rpx;
      height: 382rpx;
    }
  }
}

.emptyForIphone {
  width: 10rpx;
  height: 50rpx;
  content: "";
}

.collectPic {
  position: absolute;
  width: 400rpx;
  height: 200rpx;
  top: 180rpx;
  right: 20rpx;
  background: rgba(255, 255, 255, 0.2);
}

.zhixun {
  background: url("https://upload.yl1001.com/upload/images/view?file=rE8YsE5aTpJwjnu5wJh7-,4V/GiKJZvOUVtn,jsp/pJB_Ghoo88vTOjbs1z_o.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}

</style>
<style lang="scss">
.stylePopUnlockSuccess {
  ::v-deep .u-mode-center-box {
    background-color: transparent !important;
  }
}
</style>